<template>
  <div class="more-list-container">
    <!-- 搜索框 -->
    <div class="search-bar">
      <div class="search-box">
        <div class="search">
          <input v-model="value" type="text" @input="onSearch" placeholder="请输入搜索关键字" />
        </div>
      </div>
      <div class="cancel" @click="$router.back()">取消</div>
    </div>
    <refresh-list :canFresh="true" :status="status" @on-load="onLoad">
      <template #list>
        <!-- 活动列表 -->
        <div class="more-list">
          <feeds-item
            v-for="(s, i) in searchMoreList"
            :key="i"
            :pic_url="s.covers[0].url"
            :name="s.addresses && s.addresses[0].name"
            :title="s.title"
            :time="s.addresses && s.time"
            :price_desc="s.price_desc"
            :card_price="s.go_card_discounted_price"
            :plus_price="s.go_card_discounted_price"
            :view_count="s.view_count"
            :reason_text="s.reason_text"
            :post_covers="s.post_covers"
            :feed_id="s.id"
          ></feeds-item>
        </div>
      </template>
    </refresh-list>
  </div>
</template>

<script>
import axios from '@/utils/request'
import FeedsItem from '../activity/public-component/FeedsItem.vue'
import RefreshList from '../activity/public-component/RefreshList.vue'
export default {
  components: {
    FeedsItem,
    RefreshList
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      searchMoreList: [],
      page: 1,
      value: this.$store.state.value,
      timer: null
    }
  },
  methods: {
    // 发起请求获取数据
    async requestMoreList() {
      /*
      请求地址：https://api.xmonster.cn/v2/feeds/search
      请求方式：get
      请求参数：
      params：{
        city_name: 城市名称
        page： 1
        lat：31.2303904
        query： 搜索关键词
        limit： 3
        lng: 121.4737021
      }
      */
      const data = await axios.get('/v2/feeds/search', {
        params: {
          city_name: this.$store.state.city,
          page: 1,
          lat: this.$store.state.lat,
          lng: this.$store.state.lng,
          limit: 0,
          query: this.$store.state.value
        }
      })
      if (data.length > 0) {
        this.searchMoreList = [...this.searchMoreList, ...data]
        this.page++
      }
    },
    onSearch() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (this.value == '') {
        this.$store.commit('setValue', this.value)
        return
      }
      this.$store.commit('setValue', this.value)
      this.searchMoreList = []
      this.timer = setTimeout(async () => {
        const Toast = this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '加载中...'
        })
        await this.requestMoreList()
        Toast.clear()
        // 发起请求
      }, 500)
    }, // 滚动加载更多
    async onLoad() {
      if (this.value == '') {
        this.status.loading = false
        return
      }
      await this.requestMoreList()
      this.status.loading = false
    }
  },
  async created() {
    this.value = this.$store.state.value
    const Toast = this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '加载中...'
    })
    await this.requestMoreList()
    Toast.clear()
    // 发起请求
  }
}
</script>

<style lang="less" scoped>
.more-list-container {
  padding: 46px 10px 10px;

  .more-list {
    padding: 10px 0;
  }

  .search-bar {
    background-color: #d94648;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    padding: 0 20px;
    z-index: 10;
    display: flex;
    align-items: center;

    .search-box {
      display: flex;
      align-items: center;
      background-color: #fff;
      width: 100%;
      height: 26px;
      flex: 1;

      .search {
        flex: 1;

        input {
          outline: none;
          border: none;
          font-size: 12px;
        }
      }
    }
    .cancel {
      font-size: 14px;
      color: #fff;
      padding-left: 10px;
      line-height: 30px;
    }
  }
}
</style>
